<template>
    <div>
        <van-tabs v-model="active" color="#1989fa"  @change="onchange"
        sticky animated swipeable
        line-width="50%"
        offset-top="50">
          <van-tab title="我的待办" >
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                  <van-list 
                    id="todoList"
                    v-model="loading"
                    :finished="finished"
                    :finished-text='!haveTodoError?"没有更多数据":"" '
                    :error-text="todoErromessage"
                    @load="onLoad"
                    style="margin-bottom: 50px;">
                    <van-cell v-for="(item,index) in list" :key="index" @click="todetail(index,item,true)">
                        <div class="titlefont"> {{item.receiptTitle}}</div>
                        <div class="infosfont"> 创建部门:{{item.createOrgName}}</div>
                        <div class="infosfont"> 创建人:{{item.createUserName}}</div>
                        <div class="infosfont"> 办理时间:{{timeUtil(item.previousAssistantDate)}}</div>
                    </van-cell>
                    <div v-show="!haveTodoData" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_nodata.png')"
                            alt="暂无数据"
                            style="margin: 120px 50px 0"
                            @click="getListdata('todo')"
                        />
                    </div>   
                    
                    <div v-show="haveTodoError" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_neterror.png')"
                            alt="获取数据失败"
                            style="margin: 120px 50px 0"
                            @click="getListdata('todo')"
                        />
                        <div class="color-b font14" style="margin: 20px 0 0 15px">
                            获取数据失败!
                        </div>
                    </div>     
                  </van-list>
                 
                   
              </van-pull-refresh>
          
          </van-tab>
          <van-tab title="我的已办">
                <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" immediate-check="false">
                  <van-list 
                     id="didList"
                    v-model="loading2"
                    :finished="finished2"
                    :finished-text='!haveDidError?"没有更多数据":"" '
                    :error-text="didErromessage"
                    @load="onLoad2"
                    style="margin-bottom: 50px;">
                    <van-cell v-for="(item,index) in list2" :key="index" @click="todetail(index,item,false)" >
                        <div class="titlefont"> {{item.receiptTitle}}</div>
                        <div class="infosfont"> 创建部门:{{item.createOrgName}}</div>
                        <div class="infosfont"> 创建人:{{item.createUserName}}</div>
                        <div class="infosfont"> 办理时间:{{timeUtil(item.previousAssistantDate)}}</div>
                    </van-cell>
                    <div v-show="!haveDidData" class="text-c">
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_nodata.png')"
                            alt="暂无数据"
                            style="margin: 120px 50px 0"
                            @click="getListdata('did')"
                        />
                        
                    </div>
                    <div v-show="haveDidError" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_neterror.png')"
                            alt="获取数据失败"
                            style="margin: 120px 50px 0"
                            @click="getListdata('did')"
                        />
                        <div class="color-b font14" style="margin: 20px 0 0 15px">
                            获取数据失败!
                    </div>
                </div>         
                  </van-list>
                 
              </van-pull-refresh>
               
            
          </van-tab>
        </van-tabs>
        
    </div>
</template>
<script>
import {getMytodo,getMydid} from "@/api/gettodo";
import {Toast} from "vant";
import {Notify} from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name:'tabview0',
    data(){ 
        return{
            active:0,
            list:[],
            list2:[],
            refreshing:false,
            loading:false,
            finished:false, 
            refreshing2:false,
            loading2:false,
            finished2:false,
            gettodoListQuery:{source:"MOBILE",page:1,rows:10,size:10},
            getdidiListQuery:{source:"MOBILE",page:1,rows:10,size:10},
            maxpagetodo:100,
            maxpagedid:100,
            todoErromessage:'',
            didErromessage:'',
            haveTodoData:true,
            haveDidData:true,
            searchCode:'',
            searchTitle:'',
            haveTodoError:false,
            haveDidError:false,
        }
    },
  computed:{
      ...mapGetters(["user"]),
      ...mapGetters(["userinfo"]),
      ...mapGetters(["hassetmenu"]),
  }, 
  activated(){
        console.log('dddddddddddddddddd')
        let dom = document.getElementById('todoList');
        if (dom != null) {
            console.log('domdomdomdom')
                if (dom.scrollTop > 0) {
                    dom.scrollTop = 0;
                }
        }
        let dom2 = document.getElementById('didList');
        if (dom2 != null) {
            console.log('dom2dom2dom2dom2dom2')
                if (dom2.scrollTop > 0) {
                    dom2.scrollTop = 0;
                }
        }
  }, 
  created() {
    //  this.loading = true;
    //  this.onLoad();
            //  for(var i=0;i<10;i++){
            //         // this.list.push(this.list.length+1);
            //           console.log('addlist')
            //         this.list.push({"titleName":"AAAAAAAA","orgName":"BBB","creatName":"CCCC","creatTime":"DDDDD"});
            //          this.list2.push({"titleName":"AAAAAAAA","orgName":"BBB","creatName":"CCCC","creatTime":"DDDDD"});
            //     }
       
    },
    mounted(){
          if (localStorage.getItem('todoactiveNumber') != ''&&localStorage.getItem('todoactiveNumber')) {
          this.active = JSON.parse(localStorage.getItem('todoactiveNumber'))
          this.onchange(this.active);
          if(this.active==0){
            this.active=0;
          }else if(this.active==1){
            this.active=1;
          }else{
            this.active=0;
          }
          localStorage.setItem('todoactiveNumber', '')
        }
    },
    methods:{
        //获取初始数据
        setsearchdata(code,title){
            console.log('传入的查询参数')
            console.log('传入的查询参数'+code+title); 
            this.searchCode = code;
            this.searchTitle = title;
            if(this.active==0){
                this.onRefresh();
            }else if(this.active==1){
                this.onRefresh2();
            }
            
        },
         onchange(index){
             this.searchCode = '';
             this.searchTitle = '';
         },   
         onRefresh(){  
            //清空列表数据
            this.finished =false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading = true;
            this.refreshing = true;
            this.gettodoListQuery.page=1;
            this.maxpagetodo=100;
            this.onLoad();
        },
         onRefresh2(){
            //清空列表数据
            this.finished2 =false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading2 = true;
            this.refreshing2 = true;
            this.getdidiListQuery.page=1;
            this.maxpagedid =100;
            this.onLoad2();
        },
        onLoad(){
            // setTimeout(() =>{
                if(this.refreshing){
                    this.list=[];
                    this.refreshing =false
                }
                console.log("AAAAA"+this.user.userName)
                  if(this.gettodoListQuery.page<=this.maxpagetodo){  
                        getMytodo(Object.assign(this.gettodoListQuery,
                        {userName:this.user.userName},
                         {searchCode:this.searchCode},
                          {searchTitle:this.searchTitle},
                        ))
                        .then((result) =>{
                            this.haveTodoError=false;
                            if(!result.data){
                                this.loading=false;
                                this.finished=true;
                                Notify(result.message);
                                this.todoErromessage=result.message;
                                return;
                            }
                            let listdetails = this.list;
                            if(this.gettodoListQuery.page==1){
                                listdetails=[];
                                if(result.data.data.content){
                                    listdetails=result.data.data.content;
                                }
                                if(listdetails.length==0){
                                    this.haveTodoData=false;
                                }else{
                                    this.haveTodoData=true;
                                }
                                this.maxpagetodo=result.data.data.totalPages;
                            }else{
                                if(result.data.data.content){
                                    listdetails = listdetails.concat(result.data.data.content);
                                }
                            }
                            
                            this.list=listdetails;
                            this.loading =false;
                            this.gettodoListQuery.page=this.gettodoListQuery.page+1;
                        })
                        .catch((error) => {
                            console.log("22222222222"+JSON.stringify(error));
                            this.loading = false
                            this.finished=true;
                            this.haveTodoData=true;
                            this.todoErromessage='获取数据失败,请稍后重试';
                            this.haveTodoError=true,
                            Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                        });
                  }else{
                      this.loading = false
                      this.finished=true;
                  }
                
              
               
            // },1000);
        },
        onLoad2(){
            if(this.refreshing2){
                this.list2=[];
                this.refreshing2 =false ;
            }
            if(this.getdidiListQuery.page<=this.maxpagedid){
                getMydid(Object.assign(this.getdidiListQuery,
                {userName:this.user.userName},
                {searchCode:this.searchCode},
                {searchTitle:this.searchTitle},
                ))
                .then((result)=>{
                    this.haveDidError=false;
                    if(!result.data){
                        this.loading2 = false;
                        this.finished2=true;
                        Notify(result.message);
                        this.didErromessage=result.message;
                        return;
                    }
                    let listdetails =this.list2;
                    if(this.getdidiListQuery.page==1){
                        listdetails = [];
                        if(result.data.data.content){
                            listdetails = result.data.data.content;             
                        }
                        if(listdetails.length==0){
                            this.haveDidData=false;
                        }else{
                            this.haveDidData=true;
                        }
                        this.maxpagedid = result.data.data.totalPages;
                    }else{
                        if(result.data.data.content){
                            listdetails = listdetails.concat(result.data.data.content);
                        }
                    }
                    this.list2 = listdetails;
                    this.loading2 = false;
                    this.getdidiListQuery.page  = this.getdidiListQuery.page + 1;
                }) 
                .catch((error) => {
                    this.haveDidError=true;
                    this.haveDidData=true;
                    this.loading2 = false
                    this.finished2  = true;
                    this.didErromessage='获取数据失败,请稍后重试';
                    Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                })
            }else{
                this.loading2 = false
                this.finished2  = true; 
            }
        },
        timeUtil(value){
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },
        getListdata(value){
            if(value='todo'){
                this.onRefresh();
            }else{
                this.onRefresh2();
            }
        },
        todetail(index,value,istodo){
            console.log('所选择的工单类型是'+istodo)
            if(istodo){
                 localStorage.setItem('todoactiveNumber', '0')
                 var todoType='1';
                 var workFlag='task';
            }else{
                 localStorage.setItem('todoactiveNumber', '1')
                 var todoType='0';
                 var workFlag='join';
            }
           
            if(value.pmInsType=='A'){ //经验推广
                 this.$router.push(
                    {
                        name:'jytgdetail',
                        query:{
                        location:value.activityDefId,
                        processInstId:value.processInstId,
                        processDefName:value.processDefName,
                        workItemId:value.workItemId,
                        pmInsId:value.receiptCode,
                        workFlag:workFlag,
                        todoType:todoType,
                        processType:value.pmInsType,
                        isdraw:'0'
                        }
                    }
                )
            }else if(value.pmInsType=='B'){ //问题上报
                 this.$router.push(
                    {
                        name:'wtsbdetail',
                        query:{
                        location:value.activityDefId,
                        processInstId:value.processInstId,
                        processDefName:value.processDefName,
                        workItemId:value.workItemId,
                        pmInsId:value.receiptCode,
                        workFlag:workFlag,
                        todoType:todoType,
                        processType:value.pmInsType,
                        isdraw:'0'
                        }
                    }
                )
            }else if(value.pmInsType=='C'){ //政策宣讲
                this.$router.push(
                    {
                        name:'zcxjdetail',
                        query:{
                        location:value.activityDefId,
                        processInstId:value.processInstId,
                        processDefName:value.processDefName,
                        workItemId:value.workItemId,
                        pmInsId:value.receiptCode,
                        workFlag:workFlag,
                        todoType:todoType,
                        processType:value.pmInsType,
                        isdraw:'0'
                        }
                    }
                )
            }
           
        }
       
    }
}
</script>
<style scoped>
 .btn{
     margin-bottom: 60px;
     margin-top: 60px;
 }

  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>